import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { Table, TableWrapper, Row } from 'react-native-table-component';
import {connect} from 'react-redux'
import * as _ from 'lodash'
import { createAction, NavigationActions } from '../../utils'
import screen from '../../utils/screen'

@connect(({ forecast, loading }) => ({ ...forecast, isLoading: loading.models.forecast }))
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9'],
      widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200]
    }
  }

  componentDidMount() {
    const mainTime = this.props.mainTime
    this.loadContent(mainTime.startTime, mainTime.endTime)
  }

  componentWillReceiveProps(nextProps) {
    const mainTime= this.props.mainTime;
    const nextMainTime = nextProps.mainTime;
    if(nextMainTime.startTime === undefined || nextMainTime.endTime === undefined) {
      return false
    }
    if(nextMainTime.startTime !== mainTime.startTime || nextMainTime.endTime !== mainTime.endTime) {
      this.loadContent(nextMainTime.startTime, nextMainTime.endTime)
    }
  }

  loadContent = (s, e) => {
    console.log('load data with s: ', s, ' end: ', e)
    this.props.dispatch(createAction("forecast/getForecast")({
      startTime: s,
      endTime: e
    }))
  }

  renderLeft = (titles) => {
    console.log('titles is ', titles)
    return (
      <View>
        <Text style={styles.cellLeft}></Text>
        <Text style={[styles.cellTitleLeft]}>营业总收入</Text>
        {
          _.map(titles.yyzsrTitles, (v, i) => {
            return (
              <Text numberOfLines={1} key={i} style={styles.cellLeft}>{v}</Text>
            )
          })
        }

        <Text style={[styles.cellTitleLeft]}>营业利润</Text>
        {
          _.map(titles.yylrTitles, (v, i) => {
            return (
              <Text numberOfLines={1} key={i} style={styles.cellLeft}>{v}</Text>
            )
          })
        }
        <Text style={[styles.cellTitleLeft]}>利润总额</Text>
        {
          _.map(titles.lrzeTitles, (v, i) => {
            return (
              <Text numberOfLines={1} key={i} style={styles.cellLeft}>{v}</Text>
            )
          })
        }
        <Text style={[styles.cellTitleLeft]}>净利润</Text>
        {
          _.map(titles.jlrTitles, (v, i) => {
            return (
              <Text numberOfLines={1} key={i} style={styles.cellLeft}>{v}</Text>
            )
          })
        }
      </View>
    )
  }

  renderRight = (vs) => {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        {
          _.map(vs, (v, i) => {
            return (
              <View key={i} style={{marginHorizontal: screen.pxToDp(30)}}>
                <Text numberOfLines={1} style={styles.cellRight}>{v.key}</Text>
                <Text numberOfLines={1} style={styles.cellTitleRight}>{v.yysrTotal}</Text>
                {
                  _.map(v.yysrDetail, (vv, j) => {
                    return (
                      <Text numberOfLines={1} key={j} style={styles.cellRight}>{vv}</Text>
                    )
                  })
                }
                <Text numberOfLines={1} style={styles.cellTitleRight}>{v.yylrTotal}</Text>
                {
                  _.map(v.yylrDetail, (vv, j) => {
                    return (
                      <Text numberOfLines={1} key={j} style={styles.cellRight}>{vv}</Text>
                    )
                  })
                }
                <Text numberOfLines={1} style={styles.cellTitleRight}>{v.lrzeTotal}</Text>
                {
                  _.map(v.lrzeDetail, (vv, j) => {
                    return (
                      <Text numberOfLines={1} key={j} style={styles.cellRight}>{vv}</Text>
                    )
                  })
                }
                <Text numberOfLines={1} style={styles.cellTitleRight}>{v.jlrTotal}</Text>
                {
                  _.map(v.jlrDetail, (vv, j) => {
                    return (
                      <Text numberOfLines={1} key={j} style={styles.cellRight}>{vv}</Text>
                    )
                  })
                }
              </View>
            )
          })
        }
      </View>
    )
  }

  render() {
    const state = this.state;
    const tableData = [];
    for (let i = 0; i < 30; i += 1) {
      const rowData = [];
      for (let j = 0; j < 9; j += 1) {
        rowData.push(`${i}${j}`);
      }
      tableData.push(rowData);
    }
    const { titles, contents } = this.props;
    console.log('contents is ', contents)
    return (
      <ScrollView>
      <View style={styles.container}>
        {
          this.renderLeft(titles)
        }
        <ScrollView horizontal={true}>
          {
            this.renderRight(contents)
          }
        </ScrollView>
      </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: screen.pxToDp(30),
    backgroundColor: '#fff',
    flexDirection: 'row'
  },
  cellLeft: {
    height: screen.pxToDp(65),
    width: screen.pxToDp(300),
    color: '#636363',
    paddingLeft: screen.pxToDp(30)
  },
  cellTitleLeft: {
    height: screen.pxToDp(65),
    width: screen.pxToDp(300),
    fontSize: screen.pxToDp(30),
    color: '#202020'
  },
  cellRight: {
    height: screen.pxToDp(65),
    color: '#636363',
    textAlign: 'right',
    justifyContent: 'flex-end'
  },
  cellTitleRight: {
    textAlign: 'right',
    justifyContent: 'flex-end',
    height: screen.pxToDp(65),
    fontSize: screen.pxToDp(28),
    color: '#202020'
  },
  header: { height: 50, backgroundColor: '#537791' },
  text: { textAlign: 'center', fontWeight: '100' },
  dataWrapper: { marginTop: -1 },
  row: { height: 40, backgroundColor: '#E7E6E1' }
});

{/*<Text style={[styles.cellTitleLeft]}>营业总成本</Text>*/}
{/*{*/}
  {/*_.map(titles.yyzcbTitles, (v, i) => {*/}
    {/*return (*/}
      {/*<Text numberOfLines={1} key={i} style={styles.cellLeft}>{v}</Text>*/}
    {/*)*/}
  {/*})*/}
{/*}*/}
